<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        <el-button
          class="icon-button back-button"
          style="margin-right: 10px"
          @click="$router.back()"
        >
          <i class="el-icon-arrow-left" style="font-size: 12px"></i>
        </el-button>
        <span>
          {{ $t("desktopManage.searchDesktop") + "&nbsp;" +"/" + "&nbsp;" + searchValue }}
        </span>
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              :label="$t('desktopManage.normalDesktop')"
              name="HorizonView"
            >
              <!-- normalDesktops -->
              <basic-table
                v-loading="loading"
                ref="HorizonView"
                tableType="HorizonView"
                :immediate="false"
                :pageMethod="
                  (params) => {
                    params.keyword = searchValue;
                    params.ad_account_ids = getAdAccount('HorizonView');
                    params.type = 'HorizonView';
                    if (activeName === 'HorizonView') {
                      return $pandaApi.searchDesktops(params);
                    }
                    return
                  }
                "
              >
                <template #table-options="tableSlotData">
                  <div class="table-left-options">
                    <!-- 重启-- 已删除 -->
                    <!-- <el-button
                  class="icon-button setting-button"
                  :disabled="tableSlotData.table.selectRows.length === 0"
                  style="width: auto;"
                  @click="operation(tableSlotData.table.selectRows, 'REBOOT')"
                >
                  <i
                    class="iconfont iconzhongyiicon_guanji-zhongqi"
                    style="font-size: 12px; margin-right: 5px"
                  ></i>
                  <span style="font-size: 12px">{{
                    $t("desktopManage.operation.restart")
                  }}</span>
                </el-button> -->
                    <!-- 强制重启 --更名重启 -->
                    <el-button
                      class="icon-button setting-button"
                      :disabled="tableSlotData.table.selectRows.length === 0"
                      style="width: auto; margin-right: 10px"
                      @click="
                        operation(tableSlotData.table.selectRows, 'RESET',true)
                      "
                    >
                      <i
                        class="iconfont iconzhongyiicon_qiangzhizhongqi"
                        style="font-size: 12px; margin-right: 5px"
                      ></i>
                      <span style="font-size: 12px">{{
                        $t('desktopManage.operation.reset')
                      }}</span>
                    </el-button>
                    <el-dropdown>
                      <el-button
                        class="icon-button setting-button"
                        :disabled="tableSlotData.table.selectRows.length === 0"
                        style="width: auto; font-size: 12px"
                      >
                        {{ $t("common.More")
                        }}<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <!-- 注销 -->
                        <!-- <el-dropdown-item
                          @click.native="
                            operation(tableSlotData.table.selectRows, 'SUSPEND')
                          "
                          >{{
                            $t("desktopManage.operation.logout")
                          }}</el-dropdown-item
                        > -->
                        <!-- 断开 -->
                        <el-dropdown-item
                          @click.native="
                            operation(
                              tableSlotData.table.selectRows,
                              'DISCONNECT',
                              true
                            )
                          "
                          >{{
                            $t("desktopManage.operation.disconnect")
                          }}</el-dropdown-item
                        >
                        <!-- 外设策略 -->
                        <el-dropdown-item
                          @click.native="policy(tableSlotData.table.selectRows,true)"
                          >{{
                            $t("desktopManage.operation.policy")
                          }}</el-dropdown-item
                        >
                        <!-- 发送通知 -->
                        <el-dropdown-item
                          @click.native="
                            sendMessage(tableSlotData.table.selectRows, true,true)
                          "
                          >{{
                            $t("desktopManage.operation.sendNotification")
                          }}</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  <div class="table-right-options">
                    <!-- <el-input
                      :placeholder="$t('desktopManage.message.searchDesktops')"
                      v-model="horizonSearchValue"
                     
                      style="width: auto"
                    >
                    </el-input>
                    <el-button
                      @click="tableSearchChange(tableSlotData)"
                      type="primary"
                      style="margin-left: 10px"
                      >{{ $t("common.search") }}</el-button
                    > -->
                  </div>
                </template>
                <template #table-column="tableSlotData">
                  <el-table-column
                    type="selection"
                    width="40"
                    align="center"
                  ></el-table-column>
                  <!-- 桌面名称 -->
                  <el-table-column
                    prop="name"
                    :label="$t('desktopManage.desktopName')"
                  >
                  <template #default="props">
                    <div style="display:flex">
                      {{ props.row.name }}
                      <el-tooltip class="item" effect="dark" v-if="props.row.pretty_name" :content="props.row.pretty_name" placement="right">
                        <el-tag type="success" style="margin-left:5px;width:100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ (props.row.pretty_name) }}</el-tag>
                      </el-tooltip>
                    </div>
                  </template>
                  </el-table-column>
                  <el-table-column
                    prop="resource_pool_name"
                    :label="$t('resource.resourcePoolName')"
                    >
                  </el-table-column>
                  <!-- 规格 -->
                  <el-table-column
                    prop="cpu"
                    :label="$t('desktopManage.standard')"
                  >
                  <template #default="props">
                    {{getCpus(props.row.cpus, props.row.memory_mb)}}
                  </template>
                  </el-table-column>
                  <!-- 订单号 -->
                  <el-table-column
                    prop="order_id"
                    :label="$t('order.orderNumber')"
                  >
                  </el-table-column>
                   <!--资源实例ID-->
                  <el-table-column
                    prop="instance_id"
                    :label="$t('workspace.resourceInstanceID')"
                  >
                    <template #default="props">
                      <span v-if="props.row.instance_id">{{ props.row.instance_id}}</span>
                      <span v-else>-</span>
                    </template>
                  </el-table-column>
                  <!-- 所属租户 -->
                  <el-table-column
                    v-if="authrole != 'tenant_admin'"
                    prop="cloud_tenant_name"
                    :label="$t('desktopManage.belongsToTheTenant')"
                  >
                  </el-table-column>
                  <!--工作区-->
                  <el-table-column
                    prop="workarea_name"
                    :label="$t('workspace.workSpace')"
                  >
                    <template #default="props">
                      <!-- 系统管理员 有工作区名称就展示 没有就展示- -->
                      <!-- 租户管理员 有非虚拟工作区名称就展示 没有就展示- -->
                      <span>{{ getWorkareaName(props.row) }}</span>
                    </template>
                  </el-table-column>
                  <!-- 分配用户 -->
                  <el-table-column
                    prop="username"
                    :label="$t('desktopManage.assigningUsers')"
                    :formatter="
                      (row, column) => {
                        if (row.occupied_user.database.account_name) {
                          return row.occupied_user.database.account_name;
                        } else if (row.occupied_user.vmware.occupied_username) {
                          return row.occupied_user.vmware.occupied_username
                        } else if (row.occupied_user.database.auth_id) {
                          return row.occupied_user.database.auth_id
                        } else {
                          return '';
                        }
                      }
                    "
                  >
                  </el-table-column>
                  <!-- 别名 -->
                    <el-table-column
                      :label="$t('user.Alias')"
                      v-if="ad_account_ids.length > 0"
                      :formatter="
                        (row, column) => {
                          if (row.occupied_user.database.auth_id) {
                            const user = ad_account_ids.find((user) => (user.object_sid === row.occupied_user.database.auth_id || user.object_guid === row.occupied_user.database.auth_id));
                            return user ? user.pretty_name : '';
                          } else {
                            return '';
                          }
                        }
                      "
                    >
                    </el-table-column>
                  <!-- 电源状态 -->
                  <el-table-column
                    prop="power_state"
                    :label="$t('desktopManage.powerStatus')"
                    :formatter="
                      (row, column) => {
                        if (row.power_state) {
                          return $t(
                            `desktopManage.powerState.${row.power_state}`
                          );
                        }
                        return '';
                      }
                    "
                  >
                  </el-table-column>
                  <!-- Agent状态 -->
                  <el-table-column
                    prop="horizon_agent_state"
                    :label="$t('desktopManage.AgentStatus')"
                    :formatter="
                      (row, column) => {
                        if (row.horizon_agent_state) {
                          return $t(
                            `desktopManage.horizonAgent.${row.horizon_agent_state}`
                          );
                        }
                        return '';
                      }
                    "
                  >
                  </el-table-column>
                  <el-table-column :label="$t('common.action')" width="180">
                    <template #default="props">
                      <!-- 分配用户 -->
                      <!-- <link-button
                        v-if="authrole !== 'system_admin'"
                        :content="$t('desktopManage.operation.distribution')"
                        :size="10"
                        :font-size="'12px'"
                        style="margin-right: 15px"
                        @click="distribution(props.row)"
                      /> -->
                      <!-- 重启 -->
                      <!-- <link-button
                    :disabled="props.row.power_state === 'POWERED_OFF'"
                    :content="$t('desktopManage.operation.restart')"
                    :size="10"
                    :font-size="'12px'"
                    style="margin-right: 15px"
                    @click="operation(props.row, 'REBOOT')"
                  /> -->
                      <!-- 强制重启 -- 重启 -->
                      <link-button
                        :content="$t('desktopManage.operation.reset')"
                        :disabled="props.row.power_state === 'POWERED_OFF' || props.row.in_maintenance_mode === true"
                        :size="10"
                        :font-size="'12px'"
                        style="margin-right: 15px"
                        @click="operation(props.row, 'RESET')"
                      />
                      <!-- 注销 -->
                      <!-- <link-button v-if="authrole === 'system_admin'"
                      :disabled="props.row.power_state === 'POWERED_OFF'"
                      :content="$t('desktopManage.operation.logout')" :size="10"
                      :font-size="'12px'" style="margin-right: 15px"
                      @click="operation(props.row, 'RESET')" /> -->
                      <link-button v-if="authrole === 'system_admin'"
                        :disabled="props.row.power_state === 'POWERED_OFF' || props.row.is_connected == false || props.row.in_maintenance_mode === true"
                        :content="$t('desktopManage.operation.disconnect')" :size="10"
                        :font-size="'12px'" style="margin-right: 15px"
                        @click="operation(props.row, 'DISCONNECT')" />
                      <el-dropdown>
                        <el-button type="text" class="el-dropdown-link">
                          {{ $t("common.More")
                          }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <!-- 注销 -->
                          <!-- <el-dropdown-item
                            v-if="authrole !== 'system_admin'"
                            :disabled="props.row.power_state === 'POWERED_OFF'"
                            @click.native="operation(props.row, 'SUSPEND')"
                            >{{
                              $t("desktopManage.operation.logout")
                            }}</el-dropdown-item
                          > -->
                          <!-- 断开 -->
                          <el-dropdown-item
                            v-if="authrole !== 'system_admin'"
                            :disabled="props.row.power_state === 'POWERED_OFF' || props.row.is_connected == false || props.row.in_maintenance_mode === true"
                            @click.native="operation(props.row, 'DISCONNECT')"
                            >{{
                              $t("desktopManage.operation.disconnect")
                            }}</el-dropdown-item
                          >
                          <!-- 取消分配用户 -->
                          <!-- <el-dropdown-item
                            v-if="authrole !== 'system_admin'"
                            :disabled="!props.row.username ? true : false"
                            @click.native="operation(props.row, 'UnassignUser')"
                            >{{
                              $t("desktopManage.operation.unassignUser")
                            }}</el-dropdown-item
                          > -->
                          <!-- 外设策略 -->
                          <el-dropdown-item @click.native="policy(props.row)" 
                            :disabled="(props.row.cloud_tenant_id ? false : true) || props.row.in_maintenance_mode === true">{{
                            $t("desktopManage.operation.policy")
                          }}</el-dropdown-item>
                          <!-- 发送通知 -->
                          <el-dropdown-item
                            :disabled="(props.row.power_state === 'POWERED_OFF') || props.row.in_maintenance_mode === true"
                            @click.native="sendMessage(props.row ,true)"
                            >{{
                              $t("desktopManage.operation.sendNotification")
                            }}</el-dropdown-item
                          >
                          <!-- 设置别名 -->
                          <el-dropdown-item
                            @click.native="setPrettyNameD(props.row)"
                            >
                            {{
                              $t("desktopManage.operation.setPrettyName")
                            }}
                          </el-dropdown-item>
                          <!-- 绑定终端 -->
                          <el-dropdown-item
                            @click.native="bindClientH(props.row)"
                            >
                            {{ $t('desktopManage.operation.bindClient') }}
                          </el-dropdown-item>
                          <!-- 取消绑定终端 -->
                          <el-dropdown-item
                            :disabled="props.row.bind_clients.length <= 0"
                            @click.native="cancelBindClientH(props.row)"
                            >
                            {{ $t('desktopManage.operation.cancelBindClient') }}
                          </el-dropdown-item>
                          <!-- 绑定到租户 -->
                          <el-dropdown-item
                            v-if="authrole == 'system_admin'"
                            :disabled="props.row.order_id != null"
                            @click.native="inputDesktopInfo(props.row)">
                            {{ $t('desktopManage.enterDesktopInformation') }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column>
                </template>
                <template #others-elements="tableSlotData">
                  <desktop-pool-operation-form-dialog
                    @success="handleClick"
                    ref="operation-HorizonView"
                  />
                  <desktop-pool-select-form-dialog
                    @success="handleClick"
                    ref="distribution-HorizonView"
                  />
                  <desktop-pool-policy-form-dialog
                    @success="handleClick"
                    ref="policy-HorizonView"
                  />
                  <desktop-pool-send-message-form-dialog
                    @success="handleClick"
                    ref="send-HorizonView"
                  />
                  <!-- 设置别名 -->
                  <desktop-set-pretty-name-form-dialog @success="refreshDesktopPool" ref="setPrettyName-HorizonView"></desktop-set-pretty-name-form-dialog>
                  <!-- 绑定终端 -->
                  <desktop-bind-client ref="DesktopBindClient-HorizonView" @success="refreshDesktopPool"></desktop-bind-client>
                  <!-- 取消绑定终端 -->
                  <desktop-cancel-bind-clients-form-dialog ref="DesktopCancelBindClientsFormDialog-HorizonView" @success="refreshDesktopPool"></desktop-cancel-bind-clients-form-dialog>
                  <!-- 绑定到租户 -->
                  <input-desktop-info ref="InputDesktopInfo" @success="refreshDesktopPool"></input-desktop-info>
                </template>
              </basic-table>
            </el-tab-pane>
            <el-tab-pane
              :label="$t('desktopManage.ultimateAndGPUesktop')"
              name="HorizonDaas"
            >
              <!-- DaaSDesktops -->
              <basic-table
                v-loading="loading"
                ref="HorizonDaas"
                :immediate="false"
                :pageMethod="
                  (params) => {
                    params.keyword = searchValue;
                    params.ad_account_ids = getAdAccount('HorizonDaas');
                    params.type = 'HorizonDaas';
                    if (activeName === 'HorizonDaas') {
                      return $pandaApi.searchDesktops(params);
                    }
                    return 
                  }
                "
              >
                <template #table-options="tableSlotData">
                  <div class="table-left-options">
                    <!-- 重启 -->
                    <el-button
                      class="icon-button setting-button"
                      :disabled="tableSlotData.table.selectRows.length === 0"
                      style="width: auto"
                      @click="
                        operation(tableSlotData.table.selectRows, 'RESET',true)
                      "
                    >
                      <i
                        class="iconfont iconzhongyiicon_guanji-zhongqi"
                        style="font-size: 12px; margin-right: 5px"
                      ></i>
                      <span style="font-size: 12px">{{
                        $t("desktopManage.operation.reset")
                      }}</span>
                    </el-button>
                    <!-- 开机 -->
                    <el-button
                      class="icon-button setting-button"
                      :disabled="tableSlotData.table.selectRows.length === 0"
                      style="width: auto; margin-right: 10px"
                      @click="
                        operation(tableSlotData.table.selectRows, 'POWERON',true)
                      "
                    >
                      <i
                        class="iconfont iconzhongyiicon_kaiji"
                        style="font-size: 12px; margin-right: 5px"
                      ></i>
                      <span style="font-size: 12px">{{
                        $t("desktopManage.operation.boot")
                      }}</span>
                    </el-button>
                    <el-dropdown>
                      <el-button
                        class="icon-button setting-button"
                        :disabled="tableSlotData.table.selectRows.length === 0"
                        style="width: auto; font-size: 12px"
                      >
                        {{ $t("common.More")
                        }}<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <!-- 关机 -->
                      <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item
                      @click.native="
                        operation(tableSlotData.table.selectRows, 'SHUTDOWN')
                      "
                      >{{
                        $t("desktopManage.operation.shutdown")
                      }}</el-dropdown-item
                    > -->
                        <!-- 强制关机 --关机 -->
                        <el-dropdown-item
                          @click.native="
                            operation(
                              tableSlotData.table.selectRows,
                              'POWEROFF',true
                            )
                          "
                          >{{
                            $t("desktopManage.operation.powerOff")
                          }}</el-dropdown-item
                        >
                        <!-- 强制重启 -->
                        <!-- <el-dropdown-item
                      @click.native="
                        operation(tableSlotData.table.selectRows, 'RESET')
                      "
                      >{{
                        $t("desktopManage.operation.reset")
                      }}</el-dropdown-item
                    > -->
                        <!-- 注销 -->
                        <!-- <el-dropdown-item
                          @click.native="
                            operation(tableSlotData.table.selectRows, 'SUSPEND')
                          "
                          >{{
                            $t("desktopManage.operation.logout")
                          }}</el-dropdown-item
                        > -->
                        <!-- 断开 -->
                        <el-dropdown-item
                          @click.native="
                            operation(
                              tableSlotData.table.selectRows,
                              'DISCONNECT',true
                            )
                          "
                          >{{
                            $t("desktopManage.operation.disconnect")
                          }}</el-dropdown-item
                        >
                        <!-- 外设策略 -->
                        <el-dropdown-item
                          @click.native="policy(tableSlotData.table.selectRows,true)"
                          >{{
                            $t("desktopManage.operation.policy")
                          }}</el-dropdown-item
                        >
                        <!-- 发送通知 -->
                        <el-dropdown-item
                          @click.native="
                            sendMessage(tableSlotData.table.selectRows,false,true)
                          "
                          >{{
                            $t("desktopManage.operation.sendNotification")
                          }}</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  <div class="table-right-options">
                    <!-- <el-input
                      :placeholder="$t('desktopManage.message.searchDesktops')"
                      v-model="daasSearchValue"
                     
                      style="width: auto"
                    >
                    </el-input>
                    <el-button
                      @click="tableSearchChange(tableSlotData)"
                      type="primary"
                      style="margin-left: 10px"
                      >{{ $t("common.search") }}</el-button
                    > -->
                  </div>
                </template>
                <template #table-column="tableSlotData">
                  <el-table-column
                    type="selection"
                    width="40"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="name"
                    width="250"
                    :label="$t('desktopManage.desktopName')"
                  >
                  <template #default="props">
                    <div style="display:flex">
                      {{ props.row.name }}
                      <el-tooltip class="item" effect="dark" v-if="props.row.pretty_name" :content="props.row.pretty_name" placement="right">
                        <el-tag type="success" style="margin-left:5px;width:100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ (props.row.pretty_name) }}</el-tag>
                      </el-tooltip>
                    </div>
                  </template>
                  </el-table-column>
                  <el-table-column
                    prop="resource_pool_name"
                    :label="$t('resource.resourcePoolName')"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="cpu"
                    :label="$t('desktopManage.standard')"
                  >
                  <template #default="props">
                    {{getCpus(props.row.cpus, props.row.memory_mb)}}
                  </template>
                  </el-table-column>
                  <el-table-column
                    prop="ip_addr"
                    :label="$t('desktopManage.IPAddress')"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="order_id"
                    :label="$t('order.orderNumber')"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="instance_id"
                    :label="$t('workspace.resourceInstanceID')"
                  >
                  </el-table-column>
                  <el-table-column
                    v-if="authrole != 'tenant_admin'"
                    prop="cloud_tenant_name"
                    :label="$t('desktopManage.belongsToTheTenant')"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="occupied_user.database.account_name"
                    :label="$t('desktopManage.assigningUsers')"
                    :formatter="
                      (row, column) => {
                        if (row.occupied_user.database.account_name) {
                          return row.occupied_user.database.account_name;
                        } else if (row.occupied_user.vmware.occupied_username) {
                          return row.occupied_user.vmware.occupied_username
                        } else if (row.occupied_user.database.auth_id) {
                          return row.occupied_user.database.auth_id
                        } else {
                          return '';
                        }
                      }
                    "
                  >
                  </el-table-column>
                  <!-- 别名 -->
                  <el-table-column
                    prop="pretty_name"
                    :label="$t('user.Alias')"
                    v-if="ad_account_ids.length > 0"
                    :formatter="
                      (row, column) => {
                        if (row.occupied_user.database.auth_id) {
                          const user = ad_account_ids.find((user) => (user.object_sid === row.occupied_user.database.auth_id || user.object_guid === row.occupied_user.database.auth_id));
                          return user ? user.pretty_name : '';
                        } else {
                          return '';
                        }
                      }
                    "
                  >
                  </el-table-column>
                  <el-table-column
                    prop="power_state"
                    :label="$t('desktopManage.powerStatus')"
                    :formatter="
                      (row, column) => {
                        if (row.power_state) {
                          return $t(
                            `desktopManage.powerState.${row.power_state}`
                          );
                        }
                        return '';
                      }
                    "
                  >
                  </el-table-column>
                  <el-table-column
                    prop="state"
                    :label="$t('desktopManage.taskStatus')"
                    :formatter="
                      (row, column) => {
                        if (row.state) {
                          return $t(`desktopManage.state.${row.state}`);
                        }
                        return '';
                      }
                    "
                  >
                  </el-table-column>
                  <el-table-column
                    prop="daas_agent_state"
                    :label="$t('desktopManage.AgentStatus')"
                    :formatter="
                      (row, column) => {
                        if (row.daas_agent_state) {
                          return $t(
                            `desktopManage.agentState.${row.daas_agent_state}`
                          );
                        }
                        return '';
                      }
                    "
                  >
                  </el-table-column>
                  <el-table-column
                    prop="vmware_tools_state"
                    :label="$t('desktopManage.VMToolStatus')"
                    :formatter="
                      (row, column) => {
                        if (row.vmware_tools_state) {
                          return $t(
                            `desktopManage.VMToolState.${row.vmware_tools_state}`
                          );
                        }
                        return '';
                      }
                    "
                  >
                  </el-table-column>
                  <el-table-column :label="$t('common.action')" width="180">
                    <template #default="props">
                      <!-- 分配 -->
                      <link-button
                        v-if="authrole !== 'system_admin'"
                        :content="$t('desktopManage.operation.distribution')"
                        :size="10"
                        :font-size="'12px'"
                        style="margin-right: 15px"
                        @click="distribution(props.row)"
                      />
                      <!-- 开机 -->
                      <link-button
                        :content="$t('desktopManage.operation.boot')"
                        :disabled="props.row.power_state === 'POWERED_ON' || props.row.in_maintenance_mode === true"
                        :size="10"
                        :font-size="'12px'"
                        style="margin-right: 15px"
                        @click="operation(props.row, 'POWERON')"
                      />
                      <!-- 关机 -->
                      <link-button
                        v-if="authrole === 'system_admin'"
                        :disabled="props.row.power_state === 'POWERED_OFF' || props.row.in_maintenance_mode === true"
                        :content="$t('desktopManage.operation.powerOff')"
                        :size="10"
                        :font-size="'12px'"
                        style="margin-right: 15px"
                        @click="operation(props.row, 'POWEROFF')"
                      />
                      <el-dropdown>
                        <el-button type="text" class="el-dropdown-link">
                          {{ $t("common.More")
                          }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <!-- 关机 -->
                          <!-- <el-dropdown-item
                        @click.native="operation(props.row, 'SHUTDOWN')"
                        :disabled="props.row.power_state === 'POWERED_OFF'"
                        >{{
                          $t("desktopManage.operation.shutdown")
                        }}</el-dropdown-item
                      > -->
                          <!-- 强制关机 -- 关机 -->
                          <el-dropdown-item
                            v-if="authrole !== 'system_admin'"
                            :disabled="props.row.power_state === 'POWERED_OFF' || props.row.in_maintenance_mode === true"
                            @click.native="operation(props.row, 'POWEROFF')"
                            >{{
                              $t("desktopManage.operation.powerOff")
                            }}</el-dropdown-item
                          >
                          <!-- 重启 -->
                          <el-dropdown-item
                            :disabled="props.row.power_state === 'POWERED_OFF' || props.row.in_maintenance_mode === true"
                            @click.native="operation(props.row, 'RESET')"
                            >{{
                              $t("desktopManage.operation.reset")
                            }}</el-dropdown-item
                          >
                          <!-- 注销 -->
                          <!-- <el-dropdown-item
                            :disabled="props.row.power_state === 'POWERED_OFF'"
                            @click.native="operation(props.row, 'SUSPEND')"
                            >{{
                              $t("desktopManage.operation.logout")
                            }}</el-dropdown-item
                          > -->
                          <!-- 断开 -->
                          <el-dropdown-item
                            :disabled="(props.row.power_state === 'POWERED_OFF' || props.row.is_connected == false) || props.row.in_maintenance_mode === true"
                            @click.native="operation(props.row, 'DISCONNECT')"
                            >{{
                              $t("desktopManage.operation.disconnect")
                            }}</el-dropdown-item
                          >
                          <!-- 取消分配用户 -->
                          <el-dropdown-item
                            v-if="authrole !== 'system_admin'"
                            :disabled="!getUserName(props.row) ? true : false"
                            @click.native="operation(props.row, 'UnassignUser')"
                            >{{
                              $t("desktopManage.operation.unassignUser")
                            }}</el-dropdown-item
                          >
                          <!-- 外设策略 -->
                          <el-dropdown-item @click.native="policy(props.row)" 
                            :disabled="(props.row.cloud_tenant_id ? false : true) || props.row.in_maintenance_mode === true">{{
                            $t("desktopManage.operation.policy")
                          }}</el-dropdown-item>
                          <!-- 发送通知 -->
                          <el-dropdown-item
                            :disabled="props.row.power_state === 'POWERED_OFF' || props.row.in_maintenance_mode === true"
                            @click.native="sendMessage(props.row, false)"
                            >{{
                              $t("desktopManage.operation.sendNotification")
                            }}</el-dropdown-item
                          >
                          <!-- 设置别名 -->
                          <el-dropdown-item
                            @click.native="setPrettyNameH(props.row)"
                            >
                            {{
                              $t("desktopManage.operation.setPrettyName")
                            }}
                          </el-dropdown-item>
                          <!-- 绑定终端 -->
                          <el-dropdown-item
                            @click.native="bindClientD(props.row)"
                            >
                            {{ $t('desktopManage.operation.bindClient') }}
                          </el-dropdown-item>
                          <!-- 取消绑定终端 -->
                          <el-dropdown-item
                            :disabled="props.row.bind_clients.length <= 0"
                            @click.native="cancelBindClientD(props.row)"
                            >
                            {{ $t('desktopManage.operation.cancelBindClient') }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column>
                </template>
                <template #others-elements="tableSlotData">
                  <desktop-pool-operation-form-dialog
                    @success="handleClick"
                    ref="operation-HorizonDaas"
                  />
                  <desktop-pool-select-form-dialog
                    @success="handleClick"
                    ref="distribution-HorizonDaas"
                  />
                  <desktop-pool-policy-form-dialog
                    @success="handleClick"
                    ref="policy-HorizonDaas"
                  />
                  <desktop-pool-send-message-form-dialog
                    @success="handleClick"
                    ref="send-HorizonDaas"
                  />
                  <!-- 设置别名 -->
                  <desktop-set-pretty-name-form-dialog @success="handleClick" ref="setPrettyName-HorizonDaas"></desktop-set-pretty-name-form-dialog>
                  <!-- 绑定终端 -->
                  <desktop-bind-client ref="DesktopBindClient-HorizonDaas" @success="refreshDesktopPool"></desktop-bind-client>
                  <!-- 取消绑定终端 -->
                  <desktop-cancel-bind-clients-form-dialog ref="DesktopCancelBindClientsFormDialog-HorizonDaas" @success="refreshDesktopPool"></desktop-cancel-bind-clients-form-dialog>
                </template>
              </basic-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import BasicTable from "../../../components/Basic/Table/BasicTable.vue";
import LinkButton from "../../../components/Basic/Button/LinkButton.vue";
import DesktopPoolOperationFormDialog from "./../components/desktopPoolOperationFormDialog.vue";
import DesktopPoolSelectFormDialog from "./../components/desktopPoolSelectFormDialog.vue";
import DesktopPoolPolicyFormDialog from "./../components/desktopPoolPolicyFormDialog.vue";
import DesktopPoolSendMessageFormDialog from "./../components/desktopPoolSendMessageFormDialog.vue";
import { AuthModule } from "../../../store/modules/auth";
import { getCpus } from "../../../utils/auth";
import DesktopSetPrettyNameFormDialog from '../components/desktopSetPrettyNameFormDialog.vue';
import DesktopBindClient from '../components/desktopBindClientFormDialog.vue';
import DesktopCancelBindClientsFormDialog from '../components/desktopCancelBindClientsFormDialog.vue';
import InputDesktopInfo from '../components/inputDesktopInfoFormDialog.vue';
import { getWorkareaName } from "../../../utils";
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    DesktopPoolOperationFormDialog,
    DesktopPoolSelectFormDialog,
    DesktopPoolPolicyFormDialog,
    DesktopPoolSendMessageFormDialog,
    DesktopSetPrettyNameFormDialog,
    DesktopBindClient,
    DesktopCancelBindClientsFormDialog,
    InputDesktopInfo,
  },
  computed: {
    getCpus: () => getCpus,
    getWorkareaName: () => getWorkareaName
  },
  data() {
    return {
      loading: false,
      poolData: {},
      horizonSearchValue: "",
      daasSearchValue: "",
      searchValue: "",
      ad_account_ids: {},
      activeName: "HorizonView",
      userList: [],
      authrole: AuthModule.authrole,
      tableSearch: false
    };
  },
  async created() {
    this.searchValue = (this as any).$route.query.searchValue;
    this.ad_account_ids = JSON.parse((this as any).$route.query.ad_account_ids);
    this.getActiveName();
  },
  watch: {
    $route(to, from) {
      this.searchValue = to.query.searchValue;
      this.ad_account_ids = JSON.parse(to.query.ad_account_ids);
      this.getActiveName();
      this.handleClick();
    },
  },

  methods: {
    inputDesktopInfo(row: any) {
      (this as any).$refs['InputDesktopInfo'].init(row)
    },
    getUserName(row: any) {
      if (row.occupied_user.database.account_name) {
        return row.occupied_user.database.account_name;
      } else if (row.occupied_user.vmware.occupied_username) {
        return row.occupied_user.vmware.occupied_username
      } else if (row.occupied_user.database.auth_id) {
        return row.occupied_user.database.auth_id
      } else {
        return '';
      }
    },
    cancelBindClientD(row: any) {
      (this as any).$refs['DesktopCancelBindClientsFormDialog-HorizonDaas'].init(row)
    },
    bindClientD(row: any) {
      (this as any).$refs['DesktopBindClient-HorizonDaas'].init(row);
    },
    cancelBindClientH(row: any) {
      (this as any).$refs['DesktopCancelBindClientsFormDialog-HorizonView'].init(row)
    },
    bindClientH(row: any) {
      (this as any).$refs['DesktopBindClient-HorizonView'].init(row);
    },
    setPrettyNameD(row: any) {
      (this as any).$refs['setPrettyName-HorizonView'].init(row);
    },
    setPrettyNameH(row: any) {
      (this as any).$refs['setPrettyName-HorizonDaas'].init(row);
    },
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    handleClick() {
      (this as any).loading = true;
      if (this.activeName === "HorizonView") {
        (this.$refs["HorizonView"] as any).refresh();
        (this.$refs["HorizonView"] as any).loading = false;
        (this as any).loading = false;
        return;
      }
      (this.$refs["HorizonDaas"] as any).refresh();
      (this as any).loading = false;
      (this.$refs["HorizonDaas"] as any).loading = false;
    },
    refreshDesktopPool() {
      this.handleClick()
    },

    operation(data: any, type: string,isBatch: any) {
      if(isBatch) {
        for(let i in data) {
          if(data[i].in_maintenance_mode === true) {
            this.$message.warning(this.$t('message.frozenTip').toString());
            return;
          }
        }
      }
      let obj: any = {};
      obj.type = type;
      obj.data = data;
      if (type === 'UnassignUser' && this.activeName === 'HorizonView') {
        if (data.occupied_user.database.account_name) {
          data.username =  data.occupied_user.database.account_name;
        } else if (data.occupied_user.vmware.occupied_username) {
          data.username =  data.occupied_user.vmware.occupied_username
        } else if (data.occupied_user.database.auth_id) {
          data.username =  data.occupied_user.database.auth_id
        } else {
          data.username =  '';
        }
      }
      (this.$refs[`operation-${this.activeName}`] as any).init(obj);
    },
    distribution(data: any) {
      let obj: any = {};
      let options: any = [];
      obj.type = this.activeName as any;
      obj.data = data;
      if (this.activeName === 'HorizonView') {
        if (data.occupied_user.database.account_name) {
          data.username =  data.occupied_user.database.account_name;
        } else if (data.occupied_user.vmware.occupied_username) {
          data.username =  data.occupied_user.vmware.occupied_username
        } else if (data.occupied_user.database.auth_id) {
          data.username =  data.occupied_user.database.auth_id
        } else {
          data.username =  '';
        }
      }
      (this.$refs[`distribution-${this.activeName}`] as any).init(obj);
    },
    policy(data: any,isBatch: any) {
      if(isBatch) {
        for(let i in data) {
          if(data[i].in_maintenance_mode === true) {
            this.$message.warning(this.$t('message.frozenTip').toString());
            return;
          }
        }
      }
      if (Array.isArray(data)) {
        let isDifferent = false;
        for (let i = 0; i <= data.length -2; i ++) {
          if (data[i].cloud_tenant_id !== data[i+1].cloud_tenant_id) {
            isDifferent = true;
          }
        }
        if (isDifferent) {
          this.$message.warning((this as any).$t('message.policyErr'));
        } else {
          this.loading = true;
          let obj: any = {};
          obj.data = data;
          obj.options = [];
          (this as any).$pandaApi
            .apiGetUsbRuleGroupsByPage({cloud_tenant_id: data[0].cloud_tenant_id})
            .then((res: any) => {
              this.loading = false;
              res.forEach((item: any) => {
                if (item.name === "Default USB Rule Group") {
                  item.name = this.$t("policy.DefaultUSBRuleGroup");
                }
                obj.options.push(item);
              });
              (this.$refs[`policy-${this.activeName}`] as any).init(obj);
            })
            .catch(() => {
              this.loading = false;
              this.$message({
                message: (this as any).$t('desktopManage.message.getPolicyData'),
                type: "warning",
              });
            });
        }
      } else {
        this.loading = true;
        let obj: any = {};
        obj.data = data;
        obj.options = [];
        (this as any).$pandaApi
          .apiGetUsbRuleGroupsByPage({cloud_tenant_id: data.cloud_tenant_id})
          .then((res: any) => {
            this.loading = false;
            res.forEach((item: any) => {
              if (item.name === "Default USB Rule Group") {
                item.name = this.$t("policy.DefaultUSBRuleGroup");
              }
              obj.options.push(item);
            });
            (this.$refs[`policy-${this.activeName}`] as any).init(obj);
          })
          .catch(() => {
            this.loading = false;
            this.$message({
              message: (this as any).$t('desktopManage.message.getPolicyData'),
              type: "warning",
            });
          });
      }
    },
    sendMessage(data: any, isHorizon: any, isBatch: any) {
      if(isBatch) {
        for(let i in data) {
          if(data[i].in_maintenance_mode === true) {
            this.$message.warning(this.$t('message.frozenTip').toString());
            return;
          }
        }
      }
      let obj: any = {};
      obj.data = data;
      (this.$refs[`send-${this.activeName}`] as any).init(obj, isHorizon);
    },

    //搜索条件
    getAdAccount(type: any) {
      let arr: any = [];
      (this as any).ad_account_ids.forEach((item: any) => {
        if (type === "HorizonView") {
          arr.push(item.object_sid);
        } else {
          arr.push(item.object_guid);
        }
      });
      return JSON.stringify(arr);
    },

    // 通过获取两个接口数据，判断跳转到哪个页面
    getActiveName() {
      let PromiseArray: any = [];
      PromiseArray.push(
        (this as any).$pandaApi.searchDesktops({keyword: (this as any).searchValue, ad_account_ids: (this as any).getAdAccount('HorizonDaas'),type: 'HorizonDaas'})
      );
      PromiseArray.push(
        (this as any).$pandaApi.searchDesktops({keyword: (this as any).searchValue, ad_account_ids: (this as any).getAdAccount('HorizonView'),type: 'HorizonView'})
      );
      Promise.all(PromiseArray).then((res: any) => {
        if (res[0].length > 0 && res[1].length > 0) {
          this.activeName = "HorizonView";
        } else {
          if (res[0].length && res[0].length > 0) {
          if (res[0][0].type === 'HorizonView') {
            this.activeName = "HorizonView"
          } else {
            this.activeName = "HorizonDaas"
          }
        }
        if (res[1].length && res[1].length > 0) {
          if (res[1][0].type === 'HorizonView') {
            this.activeName = "HorizonView"
          } else {
            this.activeName = "HorizonDaas"
          }
        }
        }
        this.handleClick();
      })
    }
  },
});
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #eff1f4;

  .page-header {
    height: 60px;
    background-color: #ffffff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;
      display: flex;
      align-items: center;

      .back-button {
        width: 24px;
        height: 24px;
        padding: 0px 6px;
      }

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;

      .content-info {
        margin-bottom: 20px;

        ::v-deep .el-form-item {
          margin-bottom: 0px;
          margin-right: 40px;
        }

        ::v-deep .el-form-item__label,
        ::v-deep .el-form-item__content {
          color: #999999;
          font-size: 12px;
        }

        ::v-deep .el-form-item__content {
          color: #333333;
        }
      }
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
